<template>
  <div>
    <div class="bigSex">
      <div class="sex">
        <div style="font-size: 15px" @click="fh">&nbsp; 取消</div>
        <div class="edit_sex">编辑性别</div>
      </div>
    </div>
    <div class="gender">选择你的性别</div>
    <div class="man">
      <div id="son" class="man_two">
        男
        <img id="chose" src="" alt="" />
      </div>
      <div id="woman" class="man_one">
        女
        <img id="choose" src="" alt="" />
      </div>
    </div>
    <div class="show">是否在个人页展示</div>
    <div class="tag">
      <div>展示性别标签</div>
      <input class="switch" type="checkbox" />
    </div>
  </div>
</template>

<script>
export default {
    methods: {
        fh() {
            this.$router.push('/Data');
            //返回上一页
        },
    }
};
</script>

<style scoped>
a {
  text-decoration: none;
}

a {
  color: gray;
  font-size: 20px;
  margin-left: 10px;
}

* {
  margin: 0;
  padding: 0;
}

.sex {
  display: flex;
  height: 50px;
  align-items: center;
  margin-top: 30px;
  margin-left: 10px;
}

.edit_sex {
    margin-left: 120px;
}

.gender {
  margin-top: 30px;
  color: gray;
  margin-left: 20px;
}

.man {
  width: 350px;
  background-color: white;
  border: 1px solid rgb(208, 205, 205);
  margin: 10px auto;
  border-radius: 20px;
}

.man div {
  background-color: white;
  height: 50px;
  line-height: 50px;
}

.man_one {
  border-top: 1px solid rgb(208, 205, 205);
  margin-left: 25px;
  border-radius: 0 0 15px 15px;
  width: 300px;
}

.man_two {
  height: 100px;
  margin-left: 25px;
  border-radius: 15px;
}
.show {
  margin-top: 30px;
  color: gray;
  margin-left: 20px;
}
.tag {
  width: 350px;
  height: 60px;
  border: 1px solid rgb(208, 205, 205);
  margin: 10px auto;
  background-color: white;
  border-radius: 15px;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tag div {
  background-color: white;
  border-radius: 15px;
  margin-left: 10px;
}
.man img {
  margin-top: 20px;
  width: 15px;
  height: 15px;
  margin-left: 260px;
  position: fixed;
}
.switch {
  appearance: none;
  -moz-appearance: button;
  -webkit-appearance: none;
}
.switch {
  position: relative;
  margin: 0;
  width: 40px;
  height: 24px;
  border: 1px solid #ebebf9;
  outline: 0;
  border-radius: 16px;
  box-sizing: border-box;
  background-color: #ebebf9;
  -webkit-transition: background-color 0.1s, border 0.1s;
  transition: background-color 0.1s, border 0.1s;
  margin-right: 10px;
}

.switch:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 22px;
  border-radius: 19px;
  background-color: #ebebf9;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
  transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}

.switch:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 1px;
  width: 22px;
  height: 22px;
  border-radius: 15px;
  background-color: #ffffff;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
  transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
  transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
}

.switch:checked {
  background: red;
  border: solid 1px red;
}

.switch:checked:before {
  transform: scale(0);
}

.switch:checked:after {
  transform: translateX(15px);
}
</style>